<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box</title>
    <style>
        /*.box {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            padding: 10px;
            margin: 20px;
        }*/
        .box {
            width: 300px;
            height: 300px;
            border: 1px dashed blue;
            /*padding: 10px 20px 30px 40px;  !*上右下左*!*/
            padding: 10px 20px;  /*上下10px,左右20px*/
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px;
            /*background: gray;*/
        }
        body {
            /*background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591434782238&di=9e9fd0eab5fe183e83f882e226d6198d&imgtype=0&src=http%3A%2F%2Fimage001.fuwuqizhijia.com%2F20170322%2Fa91c275559774c5013ee7e9178f14a5a.gif");*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
        }
        .c1 {
            font-family: monospace Caladea;
            font-style: italic;
        }
        .c2 {
            font-variant: small-caps;
        }
        .c3 {
            height: 50px;
            border: 1px dotted black;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div class="c3">达内云计算 Cloud Computing</div>
<div class="box">
    达内云计算 Cloud Computing
</div>
<div class="c1">达内云计算 Cloud Computing</div>
<div class="c2">达内云计算 Cloud Computing</div>
</body>
</html>